<template>
    <div v-cloak>
        <div class="table">
            <div class="header">
                <div class="mt-cols">
                    <div class="mt-col-1 pl10">学员昵称</div>
                    <div class="time">加入时间</div>
                    <div class="share">分享人数</div>
                    <div class="action">操作</div>
                </div>
            </div>
            <div class="body">
                <div class="mt-cols" v-for="(item, index) in listData" :key="item.customerId">
                    <div class="mt-col-1 user"><img :src="item.customerHeadImageUrl" width="50"> {{item.customerNickName}}</div>
                    <div class="time">{{item.createTime | formatDate}}</div>
                    <div class="share">{{item.totalShareCount}}</div>
                    <div class="action">
                        <mt-button v-if="item.status==1" size="small" type="primary" plain @click="updateStatus(item.customerId, 2, index)">删除</mt-button>
                        <mt-button v-else-if="item.status==0" size="small" type="primary" @click="updateStatus(item.customerId, 1, index)">通过</mt-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="load-more" v-if="listData.length < total" @click="loadMore">加载更多</div>
    </div>
</template>

<script>
    import { getStudents, updateCustomerStatus } from '@/api'
    import { formatDateStr } from '@/assets/util.js'
    export default {
        data() {
            return {
                loading: false,
                page: 1,
                total: 0,
                listData: []
            }
        },
        filters: {
            formatDate: function(v) {
                return formatDateStr(v, 'yyyy-MM-dd')
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.loading = true;
                getStudents({
                    limit: 20,
                    offset: (this.page - 1) * 20
                }).then(res => {
                    this.loading = false;
                    this.listData = this.listData.concat(res.data.result.detail)
                    this.total = res.data.result.totalCount
                })
            },
            updateStatus(customerId, status, index) {
                if (status == 2) {
                    this.$message.confirm('确认删除该学员?删除后学员需要重新申请').then(() => {
                        updateCustomerStatus({ customerId, status }).then(res => {
                            this.$toast('删除成功');
                            this.listData.splice(index, 1);
                            this.total--;
                        })
                    });
                } else {
                    updateCustomerStatus({ customerId, status }).then(res => {
                        this.$toast('通过成功');
                        let newItem = Object.assign({}, this.listData[index]);
                        newItem.status = 1;
                        this.listData.splice(index, 1, newItem);
                    })
                }
            },
            loadMore() {
                this.page++;
                this.getList()
            }
        },
    }
</script>

<style scoped lang="scss">
    .table {
        padding: .3rem .1rem 0;

        .header {
            font-size: 13px;
            padding: .05rem 0 .1rem;
        }

        .body {
            .mt-cols {
                padding: .1rem 0;
            }

            .user {
                color: var(--deepColor);
                line-height: .35rem;
                padding-left: 5px;

                img {
                    border-radius: 50%;
                    width: .35rem;
                    float: left;
                    margin-right: .05rem;
                }
            }

            .time, .share {
                color: var(--tipColor);
            }
        }

        .time {
            width: 70px;
        }

        .share {
            width: 70px;
            text-align: center;
        }

        .action {
            text-align: center;
            width: 70px;
        }
    }

    .load-more {
        text-align: center;
        padding: .1rem 0;
        color: var(--tipColor);
    }
</style>